<template>
  <splitpanes class="default-theme">
    <pane size="30" :min-size="0" max-size="50">
      <dict-table ref="tableRef" @rowClick="selectDict"></dict-table>
    </pane>
    <pane size="70" :min-size="0" max-size="100">
      <h3 v-if="tabs.length === 0">未选择字典</h3>
      <el-tabs v-else v-model="activeName" closable type="border-card" @tab-remove="removeTab">
        <el-tab-pane v-for="item in tabs" :key="item.key" :name="item.key" :label="item.typeName">
          <dict-info :dict-info="item" @save="$refs.tableRef.loadSource()"></dict-info>
        </el-tab-pane>
      </el-tabs>
    </pane>
  </splitpanes>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes'
import '@/theme/splitpanes.css'
import DictTable from "@/views/system/db/dict/DictTable";
import DictInfo from "@/views/system/db/dict/DictInfo";
export default {
  name: "DbManage",
  components: {DictInfo, DictTable, Splitpanes, Pane},
  data() {
    return {
      tabs: [],
      activeName: ''
    }
  },
  methods: {
    selectDict(row) {
      row.key = row.typeId || this.$Util.uuid(6)
      const index = this.tabs.findIndex(item => item.key === row.key)
      if (index < 0) {
        this.tabs.push(row)
      }
      this.activeName = row.key
    },
    removeTab(key) {
      this.tabs = this.tabs.filter(tab => tab.key !== key)
      if (this.tabs.length > 0) {
        this.activeName = this.tabs[0].key
      }
    }
  }
}
</script>

<style scoped>

</style>